<template>
    <div class="outside">
        <Search  @excelp="exportExcl"   @search="search" @one="getVip"  @calendar="calendar"></Search>
        <Tables :arr=arr  @ResListDelAll="getVip"  @MockListDel="getVip" ></Tables>
        <Paging 
        :total="total"
        :page="params.page"
        :pagesize="params.pagesize"
        @onChange="onChange"
        @onShowSizeChange="onShowSizeChange"
        ></Paging>
        <Froms @add="getVip"></Froms>
        <compile style="display: none;" ></compile>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs,defineAsyncComponent } from 'vue'
const Tables = defineAsyncComponent(()=>import('./Components/VipTable.vue'))
const Paging = defineAsyncComponent(()=>import('./Components/Paging.vue'))
const Search = defineAsyncComponent(()=>import('./Components/Search.vue'))
const Froms = defineAsyncComponent(()=>import('./Components/Form.vue'))
const compile = defineAsyncComponent(()=>import('./Components/compile.vue'))
import { MockList, } from '../../api/VipApi' //MockListAdd
// @ts-ignore 忽略ts检查
import json2Excel from "../../utils/json2Excel";
interface excelKeyToNameType {
    [key:string]:any
}
export default defineComponent({
    components: {
        Tables,
        Paging,
        Search,
        Froms,
        compile
    },
    setup() {
        const data = reactive({
            arr: [],
            total:0,  //表示总条数
            params:{
                Vipname:'', //需要搜索的内容
                page:1,  //当前页
                pagesize:10, //一页显示多少条
                begin:'', //开始时间见
            },
            Vipstate:0,
        })
        const getVip = () => {
            MockList(data.params).then((res: any) => {
                if (res.code == 200) {
                    data.arr = res.data
                    data.total = res.total
                }
            })
        }
        //导出excel
        const exportExcl = () => {
            const excelKeyToName: excelKeyToNameType = {
                id: 'id', //id是数据的字段 后面的值是表头
                key: 'key',
                name: '序号',
                block: '卡号',
                type: '会员类型',
                grade: '会员等级',
                Vipname: '会员姓名',
                number: '手机号码',
                consume: '累计消费',
                balance: '储存余额',
                save: '累计存储',
                score: '积分',
                begin: '开卡时间',
                over: '到期时间',
            }
            const state = data.arr.map((item) => {
                const newItem: any = {};
                Object.keys(item).forEach(key => {
                    newItem[excelKeyToName[key]] = item[key];
                });
                return newItem;
            });
            // 导出 Excel
            json2Excel(state);
        }
        //搜索
        const search = (searchValue:any)=>{
             data.params.Vipname = searchValue  
             getVip()
            }
        //通过开卡时间进行搜索
        const calendar =(begin:any)=>{
            data.params.begin = begin
             console.log(data.params.begin);     
             getVip()
        }
        //完善分页
        const onChange =(val:any)=>{
             data.params.page = val
             getVip()
        }
        const onShowSizeChange =(val:any)=>{
            data.params.pagesize = val
            getVip()
        }
            onMounted(() => {
            getVip()
        })
        return { ...toRefs(data), getVip,exportExcl, search,onChange,onShowSizeChange,calendar}
    }
})
</script>

<style lang="less" scoped>
.outside {
    height: 100%;
    overflow: auto;
    position: relative;
}
</style>